@model EditProductDetailViewModel

@{
	ViewBag.Title = Resources.Shared.AppName + " - " + string.Format(Resources.Shared.EditViewTitle, Model.IdentityDescription);
	string twoLettersCulture = new System.Globalization.CultureInfo(Culture).TwoLetterISOLanguageName;	
}

<div class="view-container">
  <div class="view-header-container">
    <h2 class="view-header">@string.Format(Resources.Shared.EditViewTitle, Model.IdentityDescription)</h2>
  </div>
  <!-- Top buttons -->
  <div class="view-button-container top-button-container">
    <input type="button" class="button back-button" title="@Resources.Shared.Back" onclick="document.location = '@Url.Action("Edit", "Product", new { id = Model.ProductId })'"/>
    <input type="button" class="button save-button" title="@Resources.Shared.Save" onclick="$('#ProductDetailForm').submit()"/>	
  </div>
  <!-- Form begin -->
  <div class="entity-form-container">
    @using (Html.BeginForm("ChangeProductDetail", "Product", FormMethod.Post, new { id = "ProductDetailForm" }))
    {
      @Html.ValidationSummary(true)
      <fieldset>
        <legend>@Resources.ProductDetailResources.ProductDetail</legend>
		<div class="form">
          @Html.HiddenFor(model => model.Id)
				<div class="field">
				  <div class="label">
					@Html.Label(Resources.ProductDetailResources.Stock)
			  	  </div>
				  <div class="editor number-editor">
					@Html.TextBoxFor(model => model.Stock)
					@Html.ValidationMessageFor(model => model.Stock)
				  </div>
				</div>
                @Html.HiddenFor(model => model.ProductId)
        </div>
      </fieldset>
    }
    </div>
	<!-- Form end -->
	<!-- Tab strip begin -->
    <div id="ProductDetailTab-container">
      <ul>
        <li>
		  <span class="tab_outer">
            <span class="tab_inner">
			  <a href="#optionTab">@Resources.ProductDetailResources.Option</a>
			</span>
          </span>
		</li>
      </ul>
	 
	  <!-- Option Tab begin -->
      <div id="optionTab">
        <!-- Selection begin -->
        <div class="selection-container">
		  <!-- Availables -->
		  <div class="selection selection-availables">
		    <div class="selection-buttons">
			  <input type="button" class="button add-button" title="@Resources.Shared.Add" onclick="ShowSelection('AvailablesOption', 'AvailablesOptionGrid', 'SelectedOptionGrid', '@Url.Action("AddOption", "ProductDetail")', '@Model.Id');"/>
			  <input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportOption", "ProductDetail")?masterId=@Model.Id';" />
			</div>
			<div id="AvailablesOption" style="display:none">
			  <div class="grid-view-search">
			    <form id="AvailablesOptionGrid-form" action="">
				  <div class="grid-view-search-label-container">
				    @Html.Label(Resources.Shared.Search)
				  </div>
				  <div class="grid-view-search-input-container">
				    <input type="text" name="search" class="t-button" value="" />
				  </div>
				  <div class="grid-view-search-button-container">
				    <input type="button" name="search" class="button search-button" title="@(Resources.Shared.DoSearch)" onclick="Search('AvailablesOptionGrid-form', 'AvailablesOptionGrid','@Url.Action("LoadAvailablesOption", "ProductDetail")', CreateOptionRowData, '@Model.Id');" />
				    <input type="button" name="clean" class="button clean-button" title="@(Resources.Shared.Clean)" onclick="ClearAndSearch('AvailablesOptionGrid-form', 'AvailablesOptionGrid','@Url.Action("LoadAvailablesOption", "ProductDetail")', CreateOptionRowData, '@Model.Id');" />
				  </div>
			    </form>
			  </div>
			  <div class="grid-separator">
			  </div>		      
              <div id="OptionAvailables" class="grid-view-panel grid-view-availables">  
				<table id="AvailablesOptionGrid"></table>
			  </div>
			  <div class="grid-separator">
			  </div>
			  <div class="grid-view-view-more">
			    <input id="AvailablesOptionGrid-view-more-button" type="button" class="button view-more-button" value="@(Resources.Shared.ViewMore)" onclick="ViewMoreResults('AvailablesOptionGrid', '@Url.Action("LoadAvailablesOption", "ProductDetail")', CreateOptionRowData, 0, 10, '@Model.Id')" />
				<div class="grid-view-count">
					<span>@(Resources.Shared.GridTotal)<span id="AvailablesOptionGrid-total-count" class="count-number"></span></span>    
				</div>
			  </div>
            </div>
		  </div>	  
		  <!-- Selected -->
		  <div class="selection selection-selected">
			<div class="grid-separator">
			</div>		  
            <div class="grid-view-panel">  
			  <table id="SelectedOptionGrid"></table>
            </div>
			<div class="grid-separator">
			</div>
			<div class="grid-view-count">
              <span>@(Resources.Shared.GridTotal)<span id="SelectedOptionGrid-total-count" class="count-number"></span></span>    
            </div>
          </div>
		</div>
        <!-- Selection end -->
        
      </div>
	  <!-- Option Tab end -->
    </div>
    <!-- Tab strip end -->
 
</div>
@section Scripts {
	@Scripts.Render("~/bundles/jqueryval")
    <script src="@Url.Content("~/Scripts/cultures/methods_" + twoLettersCulture + ".js")" type="text/javascript"></script>
<script type="text/javascript">

$("#ProductDetailTab-container" ).tabs({
	show: function (event, ui) {
			if(ui.panel.id == "optionTab")
			{
				$("#SelectedOptionGrid").jqGrid({
					url: '@Url.Action("LoadSelectedOption", "ProductDetail")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					rowNum: -1,
					colNames: ['Name', 'Description', 'OptionType', ''],
					colModel: [
					{ index: 'Name', name: 'Name', sortable: false, resizable: false},
					{ index: 'Description', name: 'Description', sortable: false, resizable: false},
					{ index: 'OptionType', name: 'OptionType', sortable: false, resizable: false},
						{ name: 'remove', sortable: false , classes: 'grid-cell-remove', resizable: false},
					],
					gridComplete: 
						function(){ 
							var ids = jQuery("#SelectedOptionGrid").jqGrid('getDataIDs'); 
							for(var i=0;i < ids.length;i++)
							{ 
								var rowId = ids[i]; 
								var removeHtml = '<a href="#" onclick="return DeleteGridItem(\'SelectedOptionGrid\', \'@Url.Action("RemoveOption", "ProductDetail")\', \'' + rowId + '\', \'@Model.Id\')" title="@Resources.Shared.Remove"><img src="@Url.Content("~/Content/Images/CRUD/remove.png")"/></a>';
								$("#SelectedOptionGrid").jqGrid('setRowData', ids[i], { remove: removeHtml }); 
							}
							
							$("#SelectedOptionGrid").jqGrid('setLabel', 'Name', '@Resources.OptionResources.Name', 'grid-header-data', '');
							$("#SelectedOptionGrid").jqGrid('setLabel', 'Description', '@Resources.OptionResources.Description', 'grid-header-data', '');
							$("#SelectedOptionGrid").jqGrid('setLabel', 'OptionType', '@Resources.OptionResources.OptionType', 'grid-header-data', '');
							$("#SelectedOptionGrid").jqGrid('setLabel', 'remove', '', 'grid-header-delete', '');

							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize({ gridId: "SelectedOptionGrid", hasDelete: true });
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("SelectedOptionGrid", data.records);
						}
				});

				$("#AvailablesOptionGrid").jqGrid({
					url: '@Url.Action("LoadAvailablesOption", "ProductDetail")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					multiselect: true,        
					colNames: ['Name', 'Description', 'OptionType'],
					colModel: [
					{ index: 'Name', name: 'Name', sortable: false, resizable: false},
					{ index: 'Description', name: 'Description', sortable: false, resizable: false},
					{ index: 'OptionType', name: 'OptionType', sortable: false, resizable: false},
					],
					gridComplete:
						function(){
							var ids = jQuery("#AvailablesOptionGrid").jqGrid('getDataIDs'); 
							for(var i=0;i < ids.length;i++)
							{ 
								var rowId = ids[i]; 
								$("#AvailablesOptionGrid").jqGrid('setRowData', ids[i], {  }); 
							}
						
							$("#AvailablesOptionGrid").jqGrid('setLabel', 'Name', '@Resources.OptionResources.Name', 'grid-header-data', '');
							$("#AvailablesOptionGrid").jqGrid('setLabel', 'Description', '@Resources.OptionResources.Description', 'grid-header-data', '');
							$("#AvailablesOptionGrid").jqGrid('setLabel', 'OptionType', '@Resources.OptionResources.OptionType', 'grid-header-data', '');
							
							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize({ gridId: "AvailablesOptionGrid" });
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("AvailablesOptionGrid", data.records);
						}
				});
			}
	}
});
function CreateOptionRowData(data)
{
    return { Name: data['cell'][0], Description: data['cell'][1], OptionType: data['cell'][2] };
}

DefaultSearchEventTriggers("AvailablesOptionGrid-form");

</script>
}
